<script setup lang="ts">
// 生意参谋 竞争-竞店识别-TOP流失店铺

import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import Trans from "~/utils/sycm/trans";

const loginVisible = ref<Boolean>(false);

const visible = ref<Boolean>(false);
const showZs = ref<Boolean>(false);
const dataSource = ref<any[]>([]);
const columns = ref<any[]>([]);
const data = ref<any[]>([]);
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'rank',
      title: '排名',
      width: 60,
      sorter: (a: any, b: any) => a.rank - b.rank,
    },
    {
      dataIndex: 'shop.title',
      title: '店铺名称',
      sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
      dataType: 'shop',
      dataField: {
        shop_title: 'shop.title',
        shop_pic: 'shop.pictureUrl',
        shop_url: 'shop.shopUrl',
        b2CShop: 'shop.b2CShop',
      }
    },
    {
      dataIndex: 'lostIndex',
      title: showZs.value ? '流失指数' : '流失金额',
      sorter: (a: any, b: any) => a.lostIndex - b.lostIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text
        } else {
          const price = Trans.number(text);
          return (price + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    }, {
      dataIndex: 'lostHits',
      title: showZs.value ? '流失人气' : '流失人数',
      sorter: (a: any, b: any) => a.lostHits - b.lostHits,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text
        } else {
          const price = Trans.number(text);
          return (price + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'uvIndex',
      title: showZs.value ? '流量指数' : '访客数',
      sorter: (a: any, b: any) => a.uvIndex - b.uvIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text
        } else {
          const price = Trans.number(text);
          return (price + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'seIpvUvHits',
      title: showZs.value ? '搜索人气' : '搜索人数',
      sorter: (a: any, b: any) => a.seIpvUvHits - b.seIpvUvHits,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text
        } else {
          const price = Trans.number(text);
          return (price + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'tradeIndex',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex - b.tradeIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text
        } else {
          const price = Trans.number(text);
          return (price + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'searchRate',
      title: '搜索占比',
      sorter: (a: any, b: any) => a.searchRate - b.searchRate,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        return (text * 100).toFixed(2) + '%';
      }
    },
    {
      dataIndex: 'uvPrice',
      title: 'UV价值',
      sorter: (a: any, b: any) => a.uvPrice - b.uvPrice,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        if (isNaN(text)) {
          return 0;
        }
        return text.toFixed(2);
      }
    }
  ]
}
const calcDataSource = () => {
  dataSource.value = [];
  data.value.map((item: any, index: number) => {
    dataSource.value.push({
      ...item,
      rank: index + 1,
      searchRate: Trans.number(item.seIpvUvHits) / Trans.number(item.uvIndex),
      uvPrice: Trans.number(item.tradeIndex) / Trans.number(item.uvIndex),
    })
  })
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    visible.value = true;
    data.value = await SYCM.getInternalFiberData('#sycm-mc-ci-shop-recognition-drain-shop-list > div.oui-card-content', 'memoizedProps.children._owner.memoizedProps.originalTableData.data.data');
    calcColumns();
    calcDataSource();
  }
}
watch(() => showZs.value, (val) => {
  calcColumns();
  calcDataSource();
})
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal title="竞争-竞店识别-TOP流失店铺" width="95%" style="top: 20px" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="height: calc(100vh - 150px); overflow-y: scroll;">
        <base-table table-name="竞争-竞店识别-TOP流失店铺" :data-source="dataSource" :columns="columns" :scroll="{
    y:750
  }"
        >

        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
